<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>教练选择</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">
</head>
<style>
    .content-li {
        height: 310px;
        float: left;
        margin: 0 3px;
    }

    .pos-abs {
        position: absolute;
    }

    .slider-main-img p {
        z-index: 1;
        left: 0px;
        line-height: 30px;
        font-weight: bold;
        top: 240px;
        height: 30px;
        width: 100%;
        font-size: 14px;
        text-indent: 9px;
        background: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        background: #000000;
        text-align: center;
    }

    .slider-main-img {
        float: left;
        position: relative;
        z-index: 1;
        height: 100%;
    }

    .slider-main-img a,
    .slider-main-img a:visited {
        color: #ececec;
    }

    .slider-main-img a:hover {
        color: #fff;
    }
</style>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form" style="margin-left: 15%;">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="fullname" id="fullname" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block ">
                            <div class="layui-input-inline ">
                                <select name="agender" id="agender" style="float: left;position: relative;">
                                    <option value="-1">全部</option>
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block ">
                            <div class="layui-input-inline ">
                                <select name="sort" id="sort" style="float: left;position: relative;">
                                    <option value="1">评分</option>
                                    <option value="2">教龄</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search"
                                id="searchBtn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="text-align: center;height: 910px">
                <ul class="flow-default" id="content" style="margin-left: 10%;"></ul>
            </div>
            <div id="layPage" style="text-align: center"></div>
        </div>
    </div>
</div>

</body>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/javascript">
    var teachingStage=2;
    var coachShow;//教练展示
    if(isNoEmpty(user['studyStatus'])){
        teachingStage=user['studyStatus'];
        //科目一科目四无需选择教练
        if(teachingStage==1||teachingStage==4||teachingStage==0){
            teachingStage=2
        }
    }
    layui.use(["layer", "laypage", 'form'], function () {
        let $ = layui.jquery;
        var laypage = layui.laypage;
        var form = layui.form;
        form.render();

        if(coachShow==undefined){
            coachShow=function(coachId,uri){
                if(isNoEmpty(uri)){
                    myAjaxGet("../../data/pages.json",function(data){
                        var pages=uri.split("/")
                        for(page of pages){
                            data=data[page]?data[page]:""
                        }
                        window.parent.document.getElementById('iframeIndex').src=data['uri']+"?coachId="+coachId||""
                    })
                }
            }
        }

        var getHtml = function (d) {
            var photo=isNoEmpty(d['photo'])?MainIP + mainUri + d['photo']:'../../images/userImgError.png'
            var html = '<li class="content-li"><div class="slider-main-img " style="cursor:pointer" data-module-name="c_fimg_t_0" style="zoom: 1;float: left;">' +
                '<div onclick="coachShow(\''+d['coachId']+'\',\'coach/coachShow\')">' +
                '<img width="380" height="270" src="' +photo+'"><p class="pos-abs">' + d['fullname'] + '</p></div></div></li>'
            return html
        }

        function setContent(page) {
            myAjax(mainUri + "/coach/selectByEvaluate", {
                type: 1,
                teachingStage: 3,
                page: page,
                limit: 12
            }, function (d) {
                if (d['code'] == 0) {
                    $("#content").html("")
                    var lis = "";
                    for (val of d['data']) {
                        lis += getHtml(val)
                    }
                    $("#content").append(lis)

                }
            })
        }
        function search() {
            var data = {type: 1, teachingStage: teachingStage, page: 1, limit: 12,agender:$("#agender").find("option:checked").val(),fullname:$("#fullname").val()}
            myAjax(mainUri + "/coach/selectByEvaluate", data, function (d) {
                if (d['code'] == 0) {
                    $("#content").html("")
                    var lis = "";
                    for (val of d['data']) {
                        lis += getHtml(val)
                    }
                    $("#content").append(lis)
                    laypage.render({
                        elem: 'layPage' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: d['count'] //数据总数，从服务端得到
                        , limit: 12
                        , jump: function (obj, first) {
                            if (!first) {
                                setContent(obj.curr)
                            }
                        }
                    });
                }
            })
        }
        if(user['studyType']==-1){
            search();//加载教练列表
            $("#searchBtn").on('click',search)//搜索
        }else{
            alert("您当前无需进行教练的选取")
        }
    });

</script>
</html>